<template>

  <view>
    <!-- #ifndef  H5 -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar
          :is-back="true"
          :title-bold="true"
          :is-fixed="false"

          title-color="#000000"
          :border-bottom="false"
          back-icon-name="arrow-leftward"
          back-icon-color="#000000"
          :background="{ background: 'rgba(256,256, 256,0)' }"
      ></u-navbar>
    </u-sticky>
    <!-- #endif -->

    <view class="goods-details">
      <loading-view v-if="isFirstLoading"></loading-view>
      <view class="contain" v-if="!isNull">
        <bubble-tips top="180rpx"></bubble-tips>
        <product-swiper :imgUrls="swiperList" :video="goodsDetail.video"></product-swiper>
        <view class="goods-info">
          <view class="info-header row" v-if="goodsType != 1">
            <view class="price row-between flex1">
              <view class="primary mr10">
                <price-format :first-size="56" :second-size="36" :subscript-size="36"
                              :price="goodsDetail.min_price" :weight="700" :style="{color: '#fa4000'}"></price-format>
                <template v-if="goodsDetail.min_price != goodsDetail.max_price">
                  <text style="font-size: 46rpx;">-</text>
                  <price-format :first-size="46" :second-size="32" :subscript-size="32"
                                :show-subscript="false" :price="goodsDetail.max_price" :weight="500"></price-format>
                </template>
              </view>
              <view class="lighter mr10">已售 {{ goodsDetail.sales_sum }}</view>
            </view>
          </view>
          <view class="row" v-if="!goodsType && (goodsDetail.member_price)">
            <view class="vip-price row">
              <view class="price-name xxs">会员价</view>
              <view style="padding: 0 11rpx">
                <price-format :price="goodsDetail.member_price " :first-size="26" :second-size="26"
                              :subscript-size="22" :weight="700" color="#7B3200">
                </price-format>
                <text class="xxs" style="color: #7B3200;">起</text>
              </view>
            </view>
          </view>
          <view class="row-between">
            <view class="name lg bold">{{ goodsDetail.name }}</view>
          </view>
        </view>

        <view v-if="!goodsType" class="spec row bg-white mt20" style="display: none" @tap="showSpecFun(0)">
          <view class="text lighter">已选</view>
          <view class="line1 mr20" style="flex: 1;">{{ checkedGoods.spec_value_str || '默认' }}</view>
          <image class="icon-sm" src="/static/images/arrow_right.png"></image>
        </view>

        <view class="goods-like mt20 bg-white" v-if="goodsLike.length">
          <goods-like :list="goodsLike"></goods-like>
        </view>
        <view class="details mt20 bg-white">
          <!--        <view class="title lg">商品详情</view>-->
          <view class="content">
            <u-parse :html="goodsDetail.content" :lazy-load="true" :show-with-animation="true"></u-parse>
          </view>
        </view>
        <view class="footer row bg-white fixed row-between">
          <price-format :first-size="36" :second-size="24" :subscript-size="24"
                        :price="goodsDetail.min_price" :weight="700" :style="{color: '#000206',marginLeft:'20rpx'}"></price-format>
<!--          <view class="right-buy br60 white mr20 ml10 md"   @tap="showSpecFun(2)">{{ btnText.red }}</view>-->
          <view class="right-buy br60 white mr20 ml10 md"   @tap="buyNowDirectly">{{ btnText.red }}</view>
        </view>
      </view>
      <view v-else>
        <view class="details-null column-center">
          <image class="img-null" src="/static/images/goods_null.png"></image>
          <view class="xs muted">该商品已下架或不存在，去逛逛别的吧~</view>
        </view>
        <recommend></recommend>
      </view>
      <spec-popup :show="showSpec" :goods="goodsDetail" :is-seckill="goodsType == 1" @close="showSpec = false"
                  :show-add="popupType == 1 || popupType == 0" :show-buy="popupType == 2 || popupType == 0"
                  :showConfirm="popupType == 3" @buynow="onBuy" @addcart="onAddCart" @change="onChangeGoods"
                  :group="Boolean(isGroup)" :red-btn-text="btnText.red" :yellow-btn-text="btnText.yellow"
                  @confirm="onConfirm"></spec-popup>

      <share-popup v-model="showShareBtn"
                   :share-id="id"
                   pagePath="pages/goods_details/goods_details"
                   :type="1"
                   :config="{
				avatar: userInfo.avatar,
				nickname: userInfo.nickname,
				image: goodsDetail.poster || goodsDetail.image,
				price: goodsDetail.min_price,
				marketPrice: goodsDetail.market_price,
				name: goodsDetail.name
		}">
      </share-popup>


      <u-back-top :scroll-top="scrollTop" :top="1000"
                  :customStyle="{ backgroundColor: '#FFF', color: '#000', boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'}"></u-back-top>

    </view>
  </view>
</template>

<script>
import {
  getGoodsDetail,
  addCart,
  getPoster,
  getCartNum
} from '@/api/store';
import {
  collectGoods
} from '@/api/user';
import {
  getGoodsCoupon,
  teamCheck
} from '@/api/activity';
import {
  mapActions,
  mapGetters
} from 'vuex';
import {
  arraySlice,
  trottle
} from '@/utils/tools';
import {
  toLogin
} from '@/utils/login';
import {
  getUser,
  inputInviteCode
} from '@/api/user';
import Cache from '@/utils/cache';
import {
  strToParams
} from '@/utils/tools'

export default {
  data() {
    return {
      scrollTop: 0,
      percent: 0,
      isFirstLoading: true,
      isNull: false,
      showSpec: false,
      showCoupon: false,
      showShareBtn: false,
      showCommission: true,
      popupType: '',
      swiperList: [],
      goodsDetail: {},
      goodsLike: [],
      goodsType: 0,
      checkedGoods: {},
      couponList: [],
      comment: {},
      countTime: 0,
      tagStyle: {
        img: 'width:100%;'
      },
      team: {},
      teamFound: [],
      isGroup: 0,
      id: '',
      showDownload: false,
      distribution: {},
      foundId: ''
    };
  },
  onLoad(options) {
    this.onPageScroll = trottle(this.onPageScroll, 500, this)
    if (options && options.scene) {
      let scene = strToParams(decodeURIComponent(options.scene));
      console.log(scene, decodeURIComponent(options.scene))
      options.id = scene.id;
    }
    // #ifdef H5
    if (options && options.isapp == 1) {
      this.showDownload = true;
    }
    // #endif
    if (!options.id) {
      return this.$toast({
        title: '缺少参数，无法查看商品'
      }, {
        tab: 3
      });
    } else {
      this.id = options.id;
    }
    this.getGoodsCouponFun();
    this.getCartNum();
  },
  onShow() {
    this.getGoodsDetailFun();
  },
  onPageScroll(e) {
    const top = uni.upx2px(100)
    const {
      scrollTop
    } = e
    this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
    this.scrollTop = scrollTop
  },

  methods: {
    ...mapActions(['getCartNum']),
    async getGoodsDetailFun() {
      const {
        data,
        code
      } = await getGoodsDetail({
        id: this.id
      });
      if (code == 1) {
        let {
          goods_image,
          content,
          comment,
          like,
          activity,
          distribution
        } = data;
        let {
          info,
          team,
          team_found
        } = activity; //秒杀时间
        let time = info ?
            info.end_time - Date.now() / 1000 //拼团时间
            :
            team ?
                team.end_time - Date.now() / 1000 :
                0;

        if (team_found) {
          team_found = arraySlice(team_found, [], 2);
        }
        this.distribution = distribution || {}
        this.goodsDetail = data;
        this.swiperList = goods_image;
        this.comment = comment;
        this.goodsLike = like;
        this.countTime = time;
        this.goodsType = activity.type || 0;
        this.team = team ? team : {};
        this.teamFound = team_found ? team_found : [];
        // 设置默认选中的商品规格
        if (data.goods_item && data.goods_item.length > 0) {
          this.checkedGoods = {
            id: data.goods_item[0].id,
            spec_value_str: data.goods_item[0].spec_value_str
          };
        }
        this.$nextTick(() => {
          this.isFirstLoading = false;
        });
        // #ifdef H5
        let options = {
          shareTitle: data.name,
          shareLink: location.href + '&invite_code=' + this.userInfo.distribution_code,
          shareImage: data.image,
          shareDesc: data.remark
        };
        this.wxShare(options);
        // #endif
      } else {
        this.isNull = true
        this.isFirstLoading = false;
      }
    },
    async getGoodsCouponFun() {
      const {
        data,
        code
      } = await getGoodsCoupon({
        id: this.id
      });
      if (code == 1) {
        this.couponList = data;
      }
    },
    async collectGoodsFun() {
      if (!this.isLogin) return toLogin();
      const {
        goodsDetail: {
          is_collect
        }
      } = this;
      const {
        data,
        code
      } = await collectGoods({
        is_collect: is_collect == 0 ? 1 : 0,
        goods_id: this.id
      });
      if (code == 1) {
        if (is_collect == 0) {
          this.$toast({
            title: '收藏成功'
          });
        } else {
          this.$toast({
            title: '取消收藏'
          });
        }
        this.getGoodsDetailFun();
      }
    },
    showCouponFun() {
      if (!this.isLogin) return toLogin();
      this.showCoupon = true;
    },
    onChangeGoods(e) {
      console.log(e);
      this.checkedGoods = e.detail;
    },
    showSpecFun(type, id) {
      if (!this.isLogin) return toLogin();
      if (this.goodsType == 2 && [2, 3].includes(type)) {
        this.isGroup = 1;
        this.foundId = id;
      } else {
        this.isGroup = 0;
        this.foundId = '';
      }

      this.popupType = type;
      this.showSpec = true;
    },
    buyNowDirectly() {
      if (!this.isLogin) return toLogin();

      // 获取商品项ID
      let itemId;
      if (this.checkedGoods && this.checkedGoods.id) {
        itemId = this.checkedGoods.id;
      } else if (this.goodsDetail.items && this.goodsDetail.items.length > 0) {
        itemId = this.goodsDetail.items[0].id;
      } else {
        this.$toast({ title: '商品信息不完整' });
        return;
      }

      // 构造商品数据
      let goods = [{
        item_id: itemId,
        num: 1
      }];

      const params = { goods };

      // 处理拼团商品
      if (this.goodsType == 2) {
        params.teamId = this.team.team_id;
        if (this.foundId) {
          params.foundId = this.foundId;
        }
      }

      // 跳转到确认订单页面
      this.showSpec = false;
      uni.navigateTo({
        url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent(JSON.stringify(params))
      });
    },
    onBuy(e) {
      let {
        id,
        goodsNum
      } = e.detail;
      const {
        goodsType,
        team
      } = this;
      let goods = [{
        item_id: id,
        num: goodsNum
      }];
      const params = {
        goods,
      };
      this.showSpec = false;
      goodsType == 2 ? (params.teamId = team.team_id) : '';
      this.foundId ? (params.foundId = this.foundId) : '';
      uni.navigateTo({
        url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify(params)))
      })
      console.log(1111)
    },
    onConfirm(e) {
      const {
        team: {
          team_id
        }
      } = this;
      teamCheck({
        team_id,
        found_id: this.foundId
      }).then(res => {
        if (res.code == 1) {
          this.onBuy(e);
        }
      });
    },
    async onAddCart(e) {
      let {
        id,
        goodsNum
      } = e.detail;

      if (this.goodsType == 2) {
        // 拼团单独购买
        let goods = [{
          item_id: id,
          num: goodsNum
        }];
        uni.navigateTo({
          url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify({
            goods
          })))
        })
        return
      }
      const {
        code,
        data,
        msg
      } = await addCart({
        item_id: id,
        goods_num: goodsNum
      });
      if (code == 1) {
        this.getCartNum();
        this.$toast({
          title: msg,
          icon: 'success'
        });
        this.showSpec = false;
      }
    }
  },
  async onShareAppMessage() {
    const {
      goodsDetail,
      team,
      userInfo
    } = this;
    return {
      title: team.share_title || goodsDetail.name,
      imageUrl: goodsDetail.image,
      path: '/pages/goods_details/goods_details?id=' + this.id + "&invite_code=" + userInfo.distribution_code
    };
  },
  computed: {
    ...mapGetters(['cartNum', 'userInfo']),
    btnText() {
      const {
        goodsType
      } = this;
      switch (goodsType) {
        case 1:
          return {
            red: '立即抢购',
            yellow: ''
          };
        case 2:
          return {
            red: '立即开团',
            yellow: '单独购买'
          };
        default:
          return {
            red: '立即购买',
            yellow: '加入购物车'
          };
      }
    },
    getTeamCountTime() {
      return time => time - Date.now() / 1000;
    },
    enableCommission() {
      const {
        goodsType,
        distribution: {
          earnings,
          is_show
        }
      } = this
      return goodsType == 0 && earnings > 0 && is_show == 1
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f5f9ff;
  .goods-details {
    margin: 20rpx;
    padding: 20rpx;
    //padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    background-color: #fff;
    border-radius: 16rpx;

    .seckill {
      height: 100rpx;
      background: #ffd4d8;

      .price {
        width: 504rpx;
        height: 100%;
        background: url(../../static/images/bg_seckill.png) no-repeat;
        background-size: 100%;
      }

      .down {
        flex: 1;
      }
    }

    .group {
      height: 100rpx;
      width: 100%;
      background-image: url(../../static/images/pintuan_bg.png);
      background-size: 100%;

      .group-num {
        border: 1px solid #ffffff;
        border-radius: 4rpx;

        .group-icon {
          background: #fff;
          padding: 3rpx 7rpx;
        }
      }

      .down {
        height: 100%;
        background-color: #fff5e1;
        padding: 0 20rpx;
      }
    }

    .goods-info {
      position: relative;

      .info-header {
        padding: 20rpx 0 0rpx 24rpx;

        .price {
          align-items: baseline;
        }
      }

      .vip-price {
        margin: 0 24rpx;
        background-color: #FFE9BA;
        color: #FFD4B7;
        line-height: 36rpx;
        border-radius: 6rpx;
        overflow: hidden;

        .price-name {
          background-color: #101010;
          padding: 3rpx 12rpx;
          position: relative;
          overflow: hidden;

          &::after {
            content: '';
            display: block;
            width: 20rpx;
            height: 20rpx;
            position: absolute;
            right: -15rpx;
            background-color: #FFE9BA;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            box-sizing: border-box;
          }
        }
      }

      .name {
        padding: 20rpx 24rpx;
        flex: 1;
      }

      .icon-share {
        width: 134rpx;
        height: 60rpx;
      }
    }

    .discount {
      padding: 24rpx;

      .text {
        width: 100rpx;
        flex: none;
      }

      .con {
        width: 400rpx;
      }

      .coupons-item {
        overflow: hidden;

        & > view {
          position: relative;
          height: 40rpx;
          line-height: 40rpx;
          padding: 0 18rpx;
          border-radius: 6rpx;
          box-sizing: border-box;
          background-color: $-color-primary;
          color: #fff;
          white-space: nowrap;
          overflow: hidden;

          &::after,
          &::before {
            content: '';
            display: block;
            width: 20rpx;
            height: 20rpx;
            position: absolute;
            left: -14rpx;
            background-color: #fff;
            border-radius: 50%;
            border: 1px solid currentColor;
            box-sizing: border-box;
          }

          &::after {
            right: -14rpx;
            left: auto;
          }
        }
      }
    }

    .details-null {
      padding-top: 140rpx;
      margin-bottom: 100rpx;
    }

    .spec {
      padding: 24rpx;

      .text {
        width: 100rpx;
      }
    }

    .evaluation {
      .title {
        height: 100rpx;
        border-bottom: $-solid-border;
        padding: 0 24rpx;
      }

      .con {
        padding: 30rpx 24rpx;
      }

      .user-info .avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
      }
    }

    .details {
      .title {
        line-height: 88rpx;
        text-align: center;
      }

      & > .content {
        padding: 0 20rpx 20rpx;
        overflow: hidden;
        color: #9fa3ac;
        font-size:26rpx;
        ::v-deep image {
          vertical-align: middle;
        }

        // #ifdef H5
        ::v-deep img {
          vertical-align: middle;
        }

        // #endif
        // #ifdef MP-WEIXIN || APP-PLUS
        ::v-deep ._img {
          display: block;
        }

        // #endif
      }
    }

    .footer {
      height: 120rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      box-sizing: content-box;
      padding-bottom: env(safe-area-inset-bottom);

      .btn {
        width: 100rpx;
        height: 100rpx;
        position: relative;
        line-height: 1.3;
      }

      .cart-num {
        position: absolute;
        left: 60rpx;
        top: 6rpx;
      }

      .add-cart,
      .right-buy {
        width: 200rpx;
        text-align: center;
        padding: 16rpx 0;
      }

      .add-cart {
        background-color: #ffa630;
      }

      .right-buy {
        background-color: #fa4000;
      }
    }

    .group-play {
      .title {
        padding: 20rpx 28rpx;
        border-bottom: $-solid-border;
      }

      .steps {
        padding: 20rpx 28rpx;

        .step {
          flex: none;
        }

        .line {
          flex: 1;
          border: 1px dashed #999999;
          margin: 0 20rpx;
        }

        .number {
          border: 1rpx solid #707070;
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
          line-height: 28rpx;
          text-align: center;
          margin-right: 6rpx;
        }
      }
    }

    .group-list {
      .group-item {
        padding: 20rpx 24rpx;

        &:not(:last-of-type) {
          border-bottom: $-solid-border;
        }

        .group-btn {
          background: linear-gradient(90deg, #f95f2f 0%, #ff2c3c 100%);
          height: 58rpx;
          padding-left: 28rpx;
          padding-right: 28rpx;
          margin-left: 30rpx;
          box-shadow: 0px 6rpx 12rpx rgba(249, 47, 138, 0.4);
        }
      }
    }

    .share-money {
      position: fixed;
      left: 20rpx;
      bottom: calc(130rpx + env(safe-area-inset-bottom));
      transform: scale(0);
      transition: all .3s;

      &.show {
        transform: scale(1);
      }

      .share-close {
        width: 34rpx;
        height: 34rpx;
        background: #a7a7a7;
        border-radius: 50%;
      }

      .share-con {
        background: url('../../static/images/bg_packet_img.png');
        width: 241rpx;
        height: 208rpx;
        background-size: 100%;
        padding-top: 20rpx;
        text-align: center;
      }
    }
  }
}

.lighter{
  color: #999ca7;
  font-size: 20rpx;
}

</style>
